<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>号段列表</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../static/css/element-ui-2.6.14.css">
    <style>
        .el-header{
            color: #333;
            padding: 11px;
            background: white;
            margin: 0 0 5px 0;
        }
        .el-main {
            color: #333;
            padding: 0;
            background:white;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                <el-form-item label="号码">
                    <el-input v-model="queryForm.phone" clearable placeholder="号码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="initSegmentDataList">查询</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-table
                    :data="segmentDataList"
                    border
                    :header-cell-style="getRowClass"
                    style="width:98%;margin:0 10px;">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="segment"
                        label="号段"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="top7"
                        label="前7位"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="areaCode"
                        label="区域代码"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="areaNum"
                        label="区号"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="province"
                        label="省份"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="city"
                        align="center"
                        label="城市"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="zipCode"
                        align="center"
                        label="邮编">
                </el-table-column>
                <el-table-column
                        prop="operator"
                        align="center"
                        label="运营商">
                </el-table-column>
                <el-table-column
                        prop="crateTime"
                        align="center"
                        label="创建时间">
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
            </el-pagination>
        </el-main>
    </el-container>
</div>

<script type="text/javascript" src="../static/js/vue.min-2.6.14.js"></script>
<!-- 引入组件库 -->
<script src="../static/js/element-ui-2.15.6.js"></script>
<script src="../static/js/axios.min.js"></script>
<script src="../static/js/app.js"></script>
<script>

    new Vue({
        el: '#app',
        data:{
            segmentDataList: [],

            queryForm:{
                phone: ''
            },

            page:{
                page:1,
                pageSize:10,
                total:0
            },

            auth:{
            }
        },
        created(){
            initAuth(this.auth);
        },
        mounted(){
            this.initSegmentDataList();;
        },
        methods: {
            initSegmentDataList(){
                axios.post(domain + "resSegmentData/queryResSegmentDataByPage",{
                    page:this.page.page,
                    pageSize:this.page.pageSize,
                    phone: this.queryForm.phone

                }).then(resp=>{
                    const res = resp.data;
                    if (res.status == 200){
                        this.segmentDataList = res.data.rows;
                        this.page.total = res.data.records;
                    }else {
                        notify(resp)
                    }

                });
            },
            handleSizeChange(val){
                if(this.page.pageSize != val){
                    this.page.pageSize = val;
                    this.initSegmentDataList();
                }
            },
            handleCurrentChange(val){
                if(this.page.page != val){
                    this.page.page = val;
                    this.initSegmentDataList();
                }
            },
            getRowClass({ rowIndex }){
                if (rowIndex == 0) {
                    return 'background:RGB(238,239,246)'
                } else {
                    return ''
                }
            }
        }
    });

</script>
</body>
</html>